<template>
    <div class="pre-order">
        <payModule :tableData="tableData" :columns="columns">
            <template v-slot:count="{ row }">
                <el-input-number v-model="count" :min="1" :max="row.inventory" label="描述文字"></el-input-number>
            </template>
            <template v-slot:totalPrice="{ row }">
                {{ totalPrices(row) + '元' }}
            </template>
        </payModule>
        <div class="total-fee">
            <div class="box-wrap">
                <div class="box-shadow">
                    <span class="realpay--title" data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">应付款：</span>
                    <span class="realpay--price-symbol">{{ totalValue?.toFixed(2) }}元</span>
                    <span class="realpay--price" style="color: rgb(255, 80, 0)"></span>
                    <div class="order-confirmAddr">
                        <div class="confirmAddr-addr-user">
                            <span class="confirmAddr-title">充值详情：</span><span
                                class="confirmAddr-pro">尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有</span>
                        </div>
                        <div class="confirmAddr-addr">
                            <span class="confirmAddr-title">充值账户：{{ userInfo.nickname }}</span><span
                                class="confirmAddr-usn"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn" @click="exportOrder">
                <el-button type="danger">提交订单</el-button>
            </div>
        </div>
    </div>

</template>
<script setup>
import payModule from '../../../../components/payModule/index.vue'
import { ref, reactive } from 'vue'
import * as api from '@/api/pay.js'
import { useRoute, useRouter } from 'vue-router'
import { useLogin } from '@/store/cart.js'
import { ElMessage, ElMessageBox } from 'element-plus'
let useLogins = useLogin()
let { userInfo } = useLogins
let router = useRouter()
let route = useRoute()
let productId = ref()
// productId.value =
productId.value = route.query.product_id
let columns = reactive([
    {
        label: '充值产品',
        prop: 'productName'
    },
    {
        label: '单价',
        prop: 'price'
    },
    {
        label: '购买数量',
        prop: 'count'
    },
    {
        label: '总价',
        prop: 'totalPrice'
    },
])
let order = ref()
let tableData = ref([])
let preOrders = async () => {
    try {
        let res = await api.getProduct(productId.value)
        console.log(res.data.data);
        tableData.value = res.data.data
        order.value = res.data.data[0].product_id
    } catch (e) {
        console.log(e);
    }
}
preOrders()
let count = ref(1)
let totalValue = ref()
let totalPrices = (row) => {
    totalValue.value = count.value * row.price

    return count.value * row.price.toFixed(2)
}
let exportOrder = async () => {
    try {
        let res = await api.preOrder(order.value,count.value)
        console.log(res);
        if (res.data.state) {
            ElMessageBox.confirm('您正在提交订单', '是否确认', {
                confirmButtonText: "确定",
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    ElMessage({
                        message: '订单提交成功',
                        type: 'success'
                    })
                    router.push({ path: ('/pay/payOrder'), query: { orderId:res.data.order_id,count:count.value } })
                })
                .catch(() => {
                    // console.log(3);
                    ElMessage({
                        message: '订单提交失败',
                        type: 'error'
                    })
                })
        }
    } catch (e) {
        console.log(e);
    }

}
</script>
<style lang="scss">
.price {
    color: #ff0036;
    font-weight: bolder;
}

.total_fee {
    font-size: 16px;
    color: #ff0036;
}

.el-button {
    width: 180px;
    border-radius: 0;
}

.confirm-title {
    text-align: left;
    margin-bottom: 30px;
}

.pre-order {
    padding: 80px 100px 0 100px;
}

.total-fee {
    margin-top: 50px;
    text-align: right;
}

.box-wrap {
    display: inline-block;
    border: 1px solid #ff0036;

    .box-shadow {
        border: 3px solid #fff0e8;
        min-width: 300px;
        padding: 10px 5px 10px 20px;

        .realpay--title {
            font-weight: 700;
            color: #333;
        }

        .realpay--price-symbol {
            font-size: 26px;
            margin-right: 4px;
            color: #999;
        }

        .realpay--price {
            color: #ff0036;
            font: 700 26px tahoma;
        }

        .order-confirmAddr {
            line-height: 1.6;
            font-weight: bolder;
            margin-top: 10px;
            font-size: 16px;

            // text-align: center;
            // font-family: "PingFang SC";
            .confirmAddr-usn {
                color: #ff0036;
                font-size: 20px;
            }

            .confirmAddr-pro {
                color: goldenrod;
                font-size: 16px;
            }
        }
    }
}
</style>